<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <title>%TITLE%</title>
    <script type="module" crossorigin src="/main.js"></script>
    <link rel="stylesheet" crossorigin href="/main.css" />
  </head>
  <body class="flex flex-col font-sans md:h-screen">
    <header class="flex h-8 items-center gap-4 bg-purple-200 px-2 py-6 md:px-6">
      <a class="py-2 text-base" href="%HOMEPAGE_HREF%" id="homepage"
        >%HOMEPAGE%</a
      >
      <a class="ml-auto py-2" href="https://www.moonbitlang.com" target="_blank"
        >MoonBit</a
      >
      <button class="relative cursor-pointer py-2" id="locale-button">
        <span id="locale-text">%LOCALE%</span>
        <ul
          class="absolute right-0 top-[2.125rem] z-50 flex hidden flex-col gap-1 rounded bg-white p-2 shadow-md dark:bg-zinc-800 dark:text-gray-100"
          id="locales"
        >
          <li>
            <a
              class="block w-full rounded px-3 py-2 text-left hover:bg-zinc-100 dark:hover:bg-zinc-700"
              href="%EN_HREF%"
              id="en-href"
              >English</a
            >
          </li>
          <li>
            <a
              class="block w-full rounded px-3 py-2 text-left hover:bg-zinc-100 dark:hover:bg-zinc-700"
              href="%ZH_HREF%"
              id="zh-href"
              >中文</a
            >
          </li>
        </ul>
      </button>
      <button class="cursor-pointer py-2" id="toc-button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#000000"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="3" y1="6" x2="21" y2="6" />
          <line x1="3" y1="12" x2="21" y2="12" />
          <line x1="3" y1="18" x2="21" y2="18" />
        </svg>
      </button>
      <button class="cursor-pointer py-2" id="theme">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          width="24"
          height="24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
          />
        </svg>
      </button>
    </header>
    <div
      id="toc"
      class="fixed bottom-0 right-0 top-[3rem] z-10 hidden h-[calc(100vh-3rem)] w-screen overflow-auto bg-purple-100 text-lg dark:bg-zinc-800 dark:text-gray-100 md:right-[-400px] md:w-[400px] md:transition-all md:duration-500 md:ease-in-out"
    >
      %TOC%
    </div>
    <main
      class="flex flex-grow flex-col bg-gray-100 dark:bg-zinc-800 md:h-[calc(100vh-4rem)] md:flex-row"
    >
      <section
        class="prose flex max-w-none flex-1 flex-col items-center gap-4 p-2 dark:prose-invert prose-h2:capitalize md:justify-between md:overflow-auto md:p-6"
      >
        <div class="w-full" id="tour-content">%MARKDOWN%</div>
        <nav class="flex gap-4 md:pb-2">
          <div id="nav-back">%BACK%</div>
          — <span id="lesson-index">%INDEX%</span> /
          <span id="lesson-total">%TOTAL%</span> —
          <div id="nav-next">%NEXT%</div>
        </nav>
      </section>
      <section
        class="flex flex-1 flex-col justify-end border-t-2 border-purple-100 dark:border-purple-800 md:m-4 md:min-w-0 md:flex-1 md:rounded-md md:border"
      >
        <div
          id="editor"
          class="max-h-96 min-h-60 flex-1 bg-white pl-[10px] pt-4 text-[14px] dark:bg-[#1e1e1e] md:max-h-none md:rounded-t-md"
        >
          %CODE%
        </div>
        <div
          class="min-h-20 overflow-auto bg-gray-50 p-2 dark:bg-zinc-900 dark:text-white md:h-1/3 md:rounded-b-md"
        >
          <pre id="output"></pre>
        </div>
      </section>
    </main>
    <script>
      const sunSvg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
      </svg>
      `;

      const moonSvg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
      </svg>
      `;

      const themeButton = document.querySelector("#theme");
      const theme = localStorage.getItem("theme") ?? "light";
      if (theme === "light") {
        document.querySelector("html").classList.remove("dark");
        themeButton.innerHTML = moonSvg;
      } else {
        document.querySelector("html").classList.add("dark");
        themeButton.innerHTML = sunSvg;
      }

      const visited = localStorage.getItem("visited");
      if (!visited) {
        localStorage.setItem("visited", "true");

        const locale = navigator.language || navigator.userLanguage;
        if (locale.startsWith("zh")) {
          window.location.href = "%ZH_HREF%";
        }
      }
    </script>
  </body>
</html>
